<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>Hello World!</title>
    <!-- <script src="../Build/Cesium/Cesium.js"></script> -->
    <script src="../Build/CesiumUnminified/Cesium.js"></script>
    <script src="./createImg.js"></script>
    <style>
      @import url(../Build/Cesium/Widgets/widgets.css);

      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <div id="cesiumContainer"></div>
    <script>
      var viewer = new Cesium.Viewer("cesiumContainer", {
        //需要进行可视化的数据源的集合
        animation: true, //是否显示动画控件
        shouldAnimate: true,
        homeButton: false, //是否显示Home按钮
        fullscreenButton: false, //是否显示全屏按钮
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: true, //是否显示时间线控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息
        requestRenderMode: true, //启用请求渲染模式
        scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
        fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
        //天地图是官方开元的地图，不需要密钥
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url:
            "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali",
        }),
      });
      var d = viewer.dataSources.add(
        Cesium.GeoJsonDataSource.load("./poi.geojson", {
          stroke: Cesium.Color.HOTPINK,
          fill: Cesium.Color.PINK,
          strokeWidth: 3,
          markerSymbol: "?",
        })
      );
      //viewer.camera.flyTo(d)
      d.then(function (dataSource) {
        var pixelRange = 10;
        var minimumClusterSize = 2;
        var enabled = true;

        dataSource.clustering.enabled = enabled;
        dataSource.clustering.pixelRange = pixelRange;
        dataSource.clustering.minimumClusterSize = minimumClusterSize;

        var removeListener;

        var pinBuilder = new Cesium.PinBuilder();
        // var pin50 = pinBuilder.fromText("50+", Cesium.Color.RED, 48).toDataURL();
        // var pin40 = pinBuilder.fromText("40+", Cesium.Color.ORANGE, 48).toDataURL();
        // var pin30 = pinBuilder.fromText("30+", Cesium.Color.YELLOW, 48).toDataURL();
        // var pin20 = pinBuilder.fromText("20+", Cesium.Color.GREEN, 48).toDataURL();
        // var pin10 = pinBuilder.fromText("10+", Cesium.Color.BLUE, 48).toDataURL();

        // var pin40 = pinBuilder.fromUrlAndText("./5.png", '40+', 48).toDataURL();
        // var pin30 = pinBuilder.fromUrlAndText("./4.png", '30+', 48).toDataURL();
        // var pin20 = pinBuilder.fromUrlAndText("./3.png", '20+', 48).toDataURL();
        // var pin10 = pinBuilder.fromUrlAndText("./2.png", '10+', 48).toDataURL();

        createImg("./5.png", "40+", function (canvas) {
          pin40 = canvas.toDataURL();
        });
        createImg("./4.png", "30+", function (canvas) {
          pin30 = canvas.toDataURL();
        });
        createImg("./3.png", "20+", function (canvas) {
          pin20 = canvas.toDataURL();
        });
        createImg("./2.png", "10+", function (canvas) {
          pin20 = canvas.toDataURL();
        });
        var singleDigitPins = new Array(8);
        for (var i = 0; i < singleDigitPins.length; ++i) {
          (function (i) {
            //singleDigitPins[i] = pinBuilder.fromUrlAndText('./1.png', "" + (i + 2), 48).toDataURL();
            createImg("./1.png", "" + (i + 2), function (canvas) {
              singleDigitPins[i] = canvas.toDataURL();
            });
          })(i);
        }

        function customStyle() {
          if (Cesium.defined(removeListener)) {
            removeListener();
            removeListener = undefined;
          } else {
            removeListener = dataSource.clustering.clusterEvent.addEventListener(
              function (clusteredEntities, cluster) {
                debugger;
                cluster.label.show = false;
                cluster.billboard.show = true;
                cluster.billboard.id = cluster.label.id;
                cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;

                if (clusteredEntities.length >= 50) {
                  cluster.billboard.image = pin50;
                } else if (clusteredEntities.length >= 40) {
                  cluster.billboard.image = pin40;
                } else if (clusteredEntities.length >= 30) {
                  cluster.billboard.image = pin30;
                } else if (clusteredEntities.length >= 20) {
                  cluster.billboard.image = pin20;
                } else if (clusteredEntities.length >= 10) {
                  cluster.billboard.image = pin20;
                } else {
                  cluster.billboard.image =
                    singleDigitPins[clusteredEntities.length - 2];
                }
              }
            );
          }

          // force a re-cluster with the new styling
          var pixelRange = dataSource.clustering.pixelRange;
          dataSource.clustering.pixelRange = 0;
          dataSource.clustering.pixelRange = pixelRange;
        }

        // start with custom style
        customStyle();
      });
    </script>
  </body>
</html>
